import './首页.css';

// 发送请求, 实现动态渲染图片
ajaxFn({
  baseUrl: 'http://111.230.63.117:7001',
  url: '/api/web/carouselGroup/get',
  method: 'GET',
  data: {
    carouselGroupId: 63,
    projectId: 24,
  },
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_carousels;
      console.log(carousels);
      // 初始化轮播图
      init(carousels);
      // 执行轮播图操作
      eventFn();
    } else {
      console.log('出现了其他问题');
    }
  },
});

// 初始化渲染
function init(data) {
  let ul = document.querySelector('.img-box > ul');
  let dotBox = document.querySelector('.dot-box');

  // innerHTML
  let liHTML = '';
  let spanHTML = '';
  data.forEach((item) => {
    liHTML += `<li><img src="${item.url}"class="layz" loading="lazy" /></li>`;
    // spanHTML += `<span></span>`;
  });
  // 一次性写入
  ul.innerHTML = liHTML;
  dotBox.innerHTML = spanHTML;
  // 添加激活类名 (第一个元素)
  ul.firstElementChild.classList.add('li-active');
  dotBox.firstElementChild.classList.add('dot-active');
}

// 轮播图操作
function eventFn() {
  let arrowLeft = document.querySelector('.arrow-left');
  let arrowRight = document.querySelector('.arrow-right');
  let dots = document.querySelectorAll('.dot-box > span');
  let list = document.querySelectorAll('.img-box > ul > li');
  let box = document.querySelector('.box');

  let timer;
  // 每次点击的时候需要记录当前是第几张 (记录下标)
  let index = 0;
  // list[0] ---> 第一个li元素
  // 保存上一次的操作下标 (移除上一次的类名)
  let lastIndex = 0;
  arrowRight.addEventListener('click', arrowRightFn);
  arrowLeft.addEventListener('click', arrowLeftFn);

  // 下一张函数
  function arrowRightFn() {
    console.log('下一张');
    // ul里面展示的图片切换功能, 每一个li包含不同的img, li[下一张下标]实现切换
    index++;
    // 判断index是否超出li集合的长度, 如果超出回到第一个li
    if (index >= list.length) {
      index = 0;
    }

    // ++index >= list.length && (index = 0); // 短路运算
    changeActive();
  }

  // 上一张函数
  function arrowLeftFn() {
    console.log('上一张');

    // 切换index, 如果是第一张, 上一张为最后一张
    index--;
    if (index < 0) {
      index = list.length - 1;
    }

    // --index < 0 && (index = list.length - 1) // 短路运算
    changeActive();
  }

  // 小圆点的点击事件
  dots.forEach((el, elIndex) => {
    el.addEventListener('click', () => {
      // 获取当前点击的小圆点下标, 更换index的值就就可以实现轮播图和小圆点下标一致
      index = elIndex;
      // 更改激活类名
      changeActive();
    });
  });

  // changeActive 函数, 主要功能是修改激活类名

  function changeActive() {
    // 先移除上一张li的激活类名 li-active (当前激活对象更换了)
    list[lastIndex].classList.remove('li-active');
    // 小圆点的激活类
    dots[lastIndex].classList.remove('dot-active');

    // 更换激活对象
    list[index].classList.add('li-active');
    dots[index].classList.add('dot-active');

    // 更新上一次的值lastIndex
    lastIndex = index;
  }

  // 自动轮播
  autoPlay();
  function autoPlay() {
    // 停止上一个定时器任务 (解决切换屏幕的bug)
    clearInterval(timer);
    timer = setInterval(() => {
      // 下一张函数
      arrowRightFn();
    }, 3000);
  }

  // 停止自动轮播 (鼠标移入轮播图范围之内)
  box.addEventListener('mouseenter', () => {
    clearInterval(timer);
  });

  // 继续开始轮播 (鼠标移出轮播图范围)
  box.addEventListener('mouseleave', () => {
    autoPlay();
  });

  // visibilityChange 功能: 浏览器标签页被隐藏/显示的时候触发该事件

  document.addEventListener('visibilitychange', () => {
    // document.hidden 检测文档是否为隐藏
    // document.visibilityState

    // console.log('hidden', document.hidden);
    // console.log('visibilityState', document.visibilityState);

    if (document.hidden) {
      clearInterval(timer);
      console.log('隐藏');
    } else {
      autoPlay();
      console.log('显示');
    }
  });
}

//热门航拍点
ajaxFn({
  baseUrl: 'http://111.230.63.117:7001',
  url: '/api/web/character/getById',
  method: 'GET',
  data: {
    id: 14,
  },
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_cases;
      console.log(carousels);
      an(carousels);
    } else {
      console.log('出现了其他问题');
    }
  },
});

// 初始化渲染
function an(data) {
  let ul = document.querySelector('.Popular-2 > ul');
  // innerHTML
  let liHTML = '';
  data.forEach((item) => {
    liHTML += `<li><img src="${item.cover}" class="layz" loading="lazy"/></li>`;
  });
  ul.innerHTML = liHTML;
}

// 封装ajax函数
// 兼容GET和POST请求
function ajaxFn({ baseUrl, url, method, data = {}, headers = {}, callBack }) {
  // baseUrl 基础路径 (http://127.0.0.1:3000)
  // url 接口地址 (/api/xxx)
  // method 请求方式 (GET, POST, PUT)
  // data 请求参数 (get和post统一使用json格式)
  // headers 请求头
  // callBack 回调函数 (接收数据)

  let xhr = new XMLHttpRequest();

  // 判断是否为GET请求, 参数是需要拼接在url上
  let query = '?';
  if (Object.keys(data).length) {
    for (const key in data) {
      query += `${key}=${data[key]}&`;
    }
  }

  function setHeaders() {
    // 设置请求头
    if (Object.keys(headers).length) {
      for (const key in headers) {
        const element = headers[key];
        xhr.setRequestHeader(key, element);
      }
    }
  }

  if (method.toUpperCase() === 'GET') {
    // baseUrl + url + ?type=0&id=111
    xhr.open(method, baseUrl + url + query.slice(0, -1));
    setHeaders();
    xhr.send();
  } else {
    xhr.open(method, baseUrl + url);
    // 请求体要求发送一个json字符串
    setHeaders();
    xhr.send(JSON.stringify(data));
  }

  // 监听xhr对象请求的状态
  xhr.addEventListener('readystatechange', () => {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        callBack(JSON.parse(xhr.response));
      } else {
        // 可能出现了报错, 一般后端都会响应报错信息, 也需要返回出去到回调函数
        callBack(JSON.parse(xhr.response));
      }
    }
  });
}

ajaxFn({
  baseUrl: 'http://111.230.63.117:7001',
  url: '/api/web/carouselGroup/get',
  method: 'GET',
  data: {
    carouselGroupId: 89,
    projectId: 24,
  },
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_carousels;
      console.log(carousels);
      fn(carousels);
    } else {
      console.log('出现了其他问题');
    }
  },
});

function fn(data) {
  let ul = document.querySelector('.tu > ul');
  let liHTML = '';
  data.forEach((item) => {
    liHTML += `<li><img src="${item.url}" class="layz" loading="lazy"/></li>`;
  });
  ul.innerHTML = liHTML;
}

window.addEventListener('DOMContentLoaded', function () {
  let spans = document.querySelectorAll('.yuan');
  let images = document.querySelectorAll('.tu > ul'); // 获取所有图片
  let currentImageIndex = 0; // 当前显示的图片索引
  let indexs = -1;
  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 更新图片索引
      currentImageIndex = index;
      // 移动到下一张图片
      images.forEach((image, imgIndex) => {
        image.style.transform =
          'translateX(' + (imgIndex - currentImageIndex) * 100 + '%)';
      });
    });
  });

  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 移除其他元素的 'active' 类
      spans.forEach((el, i) => {
        if (i !== index) {
          el.classList.remove('active');
        }
      });
      // 给当前元素添加 'active' 类
      if (indexs !== index) {
        el.classList.add('active');
        indexs = index; // 更新索引
      }
    });
  });
});

ajaxFn({
  baseUrl: 'http://111.230.63.117:7001',
  url: '/api/web/carouselGroup/get',
  method: 'GET',
  data: {
    carouselGroupId: 91,
    projectId: 24,
  },
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_carousels;
      console.log(carousels);
      fn1(carousels);
    } else {
      console.log('出现了其他问题');
    }
  },
});

function fn1(data) {
  let ul = document.querySelector('.zan > ul');
  let liHTML = '';
  data.forEach((item) => {
    liHTML += `<li><img src="${item.url}" class="layz" loading="lazy"/></li>`;
  });
  ul.innerHTML = liHTML;
}

window.addEventListener('DOMContentLoaded', function () {
  let spans = document.querySelectorAll('.yuan');
  let images = document.querySelectorAll('.zan > ul'); // 获取所有图片
  let currentImageIndex = 0; // 当前显示的图片索引
  let indexs = -1;
  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 更新图片索引
      currentImageIndex = index;
      // 移动到下一张图片
      images.forEach((image, imgIndex) => {
        image.style.transform =
          'translateX(' + (imgIndex - currentImageIndex) * 100 + '%)';
      });
    });
  });

  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 移除其他元素的 'active' 类
      spans.forEach((el, i) => {
        if (i !== index) {
          el.classList.remove('active');
        }
      });
      // 给当前元素添加 'active' 类
      if (indexs !== index) {
        el.classList.add('active');
        indexs = index; // 更新索引
      }
    });
  });
});

//城市
ajaxFn({
  baseUrl: 'http://111.230.63.117:7001',
  url: '/api/web/carouselGroup/get',
  method: 'GET',
  data: {
    carouselGroupId: 90,
    projectId: 24,
  },
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_carousels;
      console.log(carousels);
      fn2(carousels);
    } else {
      console.log('出现了其他问题');
    }
  },
});

function fn2(data) {
  let ul = document.querySelector('.img > ul');
  let liHTML = '';
  data.forEach((item) => {
    liHTML += `<li><img src="${item.url}" class="layz" loading="lazy"/></li>`;
  });
  ul.innerHTML = liHTML;
}

window.addEventListener('DOMContentLoaded', function () {
  let spans = document.querySelectorAll('.yuan1');
  let images = document.querySelectorAll('.img > ul'); // 获取所有图片
  let currentImageIndex = 0; // 当前显示的图片索引
  let indexs = -1;
  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 更新图片索引
      currentImageIndex = index;
      // 移动到下一张图片
      images.forEach((image, imgIndex) => {
        image.style.transform =
          'translateX(' + (imgIndex - currentImageIndex) * 100 + '%)';
      });
    });
  });

  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 移除其他元素的 'active' 类
      spans.forEach((el, i) => {
        if (i !== index) {
          el.classList.remove('active');
        }
      });
      // 给当前元素添加 'active' 类
      if (indexs !== index) {
        el.classList.add('active');
        indexs = index; // 更新索引
      }
    });
  });
});

ajaxFn({
  baseUrl: 'http://111.230.63.117:7001',
  url: '/api/web/carouselGroup/get',
  method: 'GET',
  data: {
    carouselGroupId: 91,
    projectId: 24,
  },
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_carousels;
      console.log(carousels);
      fn3(carousels);
    } else {
      console.log('出现了其他问题');
    }
  },
});

function fn3(data) {
  let ul = document.querySelector('.zan-2 > ul');
  let liHTML = '';
  data.forEach((item) => {
    liHTML += `<li><img src="${item.url}" class="layz" loading="lazy"/></li>`;
  });
  ul.innerHTML = liHTML;
}

window.addEventListener('DOMContentLoaded', function () {
  let spans = document.querySelectorAll('.yuan1');
  let images = document.querySelectorAll('.zan-2 > ul'); // 获取所有图片
  let currentImageIndex = 0; // 当前显示的图片索引
  let indexs = -1;
  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 更新图片索引
      currentImageIndex = index;
      // 移动到下一张图片
      images.forEach((image, imgIndex) => {
        image.style.transform =
          'translateX(' + (imgIndex - currentImageIndex) * 100 + '%)';
      });
    });
  });

  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 移除其他元素的 'active' 类
      spans.forEach((el, i) => {
        if (i !== index) {
          el.classList.remove('active');
        }
      });
      // 给当前元素添加 'active' 类
      if (indexs !== index) {
        el.classList.add('active');
        indexs = index; // 更新索引
      }
    });
  });
});

//运动
ajaxFn({
  baseUrl: 'http://111.230.63.117:7001',
  url: '/api/web/carouselGroup/get',
  method: 'GET',
  data: {
    carouselGroupId: 92,
    projectId: 24,
  },
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_carousels;
      console.log(carousels);
      fn4(carousels);
    } else {
      console.log('出现了其他问题');
    }
  },
});

function fn4(data) {
  let ul = document.querySelector('.img2 > ul');
  let liHTML = '';
  data.forEach((item) => {
    liHTML += `<li><img src="${item.url}" class="layz" loading="lazy"/></li>`;
  });
  ul.innerHTML = liHTML;
}

window.addEventListener('DOMContentLoaded', function () {
  let spans = document.querySelectorAll('.yuan2');
  let images = document.querySelectorAll('.img2 > ul'); // 获取所有图片
  let currentImageIndex = 0; // 当前显示的图片索引
  let indexs = -1;
  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 更新图片索引
      currentImageIndex = index;
      // 移动到下一张图片
      images.forEach((image, imgIndex) => {
        image.style.transform =
          'translateX(' + (imgIndex - currentImageIndex) * 100 + '%)';
      });
    });
  });

  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 移除其他元素的 'active' 类
      spans.forEach((el, i) => {
        if (i !== index) {
          el.classList.remove('active');
        }
      });
      // 给当前元素添加 'active' 类
      if (indexs !== index) {
        el.classList.add('active');
        indexs = index; // 更新索引
      }
    });
  });
});

ajaxFn({
  baseUrl: 'http://111.230.63.117:7001',
  url: '/api/web/carouselGroup/get',
  method: 'GET',
  data: {
    carouselGroupId: 91,
    projectId: 24,
  },
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_carousels;
      console.log(carousels);
      fn5(carousels);
    } else {
      console.log('出现了其他问题');
    }
  },
});

function fn5(data) {
  let ul = document.querySelector('.zan-3 > ul');
  let liHTML = '';
  data.forEach((item) => {
    liHTML += `<li><img src="${item.url}" class="layz" loading="lazy"/></li>`;
  });
  ul.innerHTML = liHTML;
}

window.addEventListener('DOMContentLoaded', function () {
  let spans = document.querySelectorAll('.yuan2');
  let images = document.querySelectorAll('.zan-3 > ul'); // 获取所有图片
  let currentImageIndex = 0; // 当前显示的图片索引
  let indexs = -1;
  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 更新图片索引
      currentImageIndex = index;
      // 移动到下一张图片
      images.forEach((image, imgIndex) => {
        image.style.transform =
          'translateX(' + (imgIndex - currentImageIndex) * 100 + '%)';
      });
    });
  });

  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 移除其他元素的 'active' 类
      spans.forEach((el, i) => {
        if (i !== index) {
          el.classList.remove('active');
        }
      });
      // 给当前元素添加 'active' 类
      if (indexs !== index) {
        el.classList.add('active');
        indexs = index; // 更新索引
      }
    });
  });
});

//人物
ajaxFn({
  baseUrl: 'http://111.230.63.117:7001',
  url: '/api/web/carouselGroup/get',
  method: 'GET',
  data: {
    carouselGroupId: 93,
    projectId: 24,
  },
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_carousels;
      console.log(carousels);
      fn6(carousels);
    } else {
      console.log('出现了其他问题');
    }
  },
});

function fn6(data) {
  let ul = document.querySelector('.img3 > ul');
  let liHTML = '';
  data.forEach((item) => {
    liHTML += `<li><img src="${item.url}" class="layz" loading="lazy"/></li>`;
  });
  ul.innerHTML = liHTML;
}

window.addEventListener('DOMContentLoaded', function () {
  let spans = document.querySelectorAll('.yuan3');
  let images = document.querySelectorAll('.img3 > ul'); // 获取所有图片
  let currentImageIndex = 0; // 当前显示的图片索引
  let indexs = -1;
  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 更新图片索引
      currentImageIndex = index;
      // 移动到下一张图片
      images.forEach((image, imgIndex) => {
        image.style.transform =
          'translateX(' + (imgIndex - currentImageIndex) * 100 + '%)';
      });
    });
  });

  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 移除其他元素的 'active' 类
      spans.forEach((el, i) => {
        if (i !== index) {
          el.classList.remove('active');
        }
      });
      // 给当前元素添加 'active' 类
      if (indexs !== index) {
        el.classList.add('active');
        indexs = index; // 更新索引
      }
    });
  });
});

ajaxFn({
  baseUrl: 'http://111.230.63.117:7001',
  url: '/api/web/carouselGroup/get',
  method: 'GET',
  data: {
    carouselGroupId: 91,
    projectId: 24,
  },
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_carousels;
      console.log(carousels);
      fn7(carousels);
    } else {
      console.log('出现了其他问题');
    }
  },
});

function fn7(data) {
  let ul = document.querySelector('.zan-4 > ul');
  let liHTML = '';
  data.forEach((item) => {
    liHTML += `<li><img src="${item.url}" class="layz" loading="lazy"/></li>`;
  });
  ul.innerHTML = liHTML;
}

window.addEventListener('DOMContentLoaded', function () {
  let spans = document.querySelectorAll('.yuan3');
  let images = document.querySelectorAll('.zan-4 > ul'); // 获取所有图片
  let currentImageIndex = 0; // 当前显示的图片索引
  let indexs = -1;
  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 更新图片索引
      currentImageIndex = index;
      // 移动到下一张图片
      images.forEach((image, imgIndex) => {
        image.style.transform =
          'translateX(' + (imgIndex - currentImageIndex) * 100 + '%)';
      });
    });
  });

  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 移除其他元素的 'active' 类
      spans.forEach((el, i) => {
        if (i !== index) {
          el.classList.remove('active');
        }
      });
      // 给当前元素添加 'active' 类
      if (indexs !== index) {
        el.classList.add('active');
        indexs = index; // 更新索引
      }
    });
  });
});

//摄影师
ajaxFn({
  baseUrl: 'http://111.230.63.117:7001',
  url: '/api/web/carouselGroup/get',
  method: 'GET',
  data: {
    carouselGroupId: 94,
    projectId: 24,
  },
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_carousels;
      console.log(carousels);
      fn9(carousels);
    } else {
      console.log('出现了其他问题');
    }
  },
});

function fn9(data) {
  let ul = document.querySelector('.img4 > ul');
  let liHTML = '';
  data.forEach((item) => {
    liHTML += `<li><img src="${item.url}" class="layz" loading="lazy"/></li>`;
  });
  ul.innerHTML = liHTML;
}

window.addEventListener('DOMContentLoaded', function () {
  let spans = document.querySelectorAll('.yuan4');
  let images = document.querySelectorAll('.img4 > ul'); // 获取所有图片
  let currentImageIndex = 0; // 当前显示的图片索引
  let indexs = -1;
  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 更新图片索引
      currentImageIndex = index;
      // 移动到下一张图片
      images.forEach((image, imgIndex) => {
        image.style.transform =
          'translateX(' + (imgIndex - currentImageIndex) * 100 + '%)';
      });
    });
  });

  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 移除其他元素的 'active' 类
      spans.forEach((el, i) => {
        if (i !== index) {
          el.classList.remove('active');
        }
      });
      // 给当前元素添加 'active' 类
      if (indexs !== index) {
        el.classList.add('active');
        indexs = index; // 更新索引
      }
    });
  });
});

ajaxFn({
  baseUrl: 'http://111.230.63.117:7001',
  url: '/api/web/carouselGroup/get',
  method: 'GET',
  data: {
    carouselGroupId: 91,
    projectId: 24,
  },
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_carousels;
      console.log(carousels);
      fn8(carousels);
    } else {
      console.log('出现了其他问题');
    }
  },
});

function fn8(data) {
  let ul = document.querySelector('.zan-5 > ul');
  let liHTML = '';
  data.forEach((item) => {
    liHTML += `<li><img src="${item.url}" class="layz" loading="lazy"/></li>`;
  });
  ul.innerHTML = liHTML;
}

window.addEventListener('DOMContentLoaded', function () {
  let spans = document.querySelectorAll('.yuan4');
  let images = document.querySelectorAll('.zan-5 > ul'); // 获取所有图片
  let currentImageIndex = 0; // 当前显示的图片索引
  let indexs = -1;
  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 更新图片索引
      currentImageIndex = index;
      // 移动到下一张图片
      images.forEach((image, imgIndex) => {
        image.style.transform =
          'translateX(' + (imgIndex - currentImageIndex) * 100 + '%)';
      });
    });
  });

  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 移除其他元素的 'active' 类
      spans.forEach((el, i) => {
        if (i !== index) {
          el.classList.remove('active');
        }
      });
      // 给当前元素添加 'active' 类
      if (indexs !== index) {
        el.classList.add('active');
        indexs = index; // 更新索引
      }
    });
  });
});

//热门标签
ajaxFn({
  baseUrl: 'http://111.230.63.117:7001',
  url: '/api/web/carouselGroup/get',
  method: 'GET',
  data: {
    carouselGroupId: 95,
    projectId: 24,
  },
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  callBack: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.w_carousels;
      console.log(carousels);
      Hot(carousels);
    } else {
      console.log('出现了其他问题');
    }
  },
});

function Hot(data) {
  let ul = document.querySelector('.Hot-2 > ul');
  let liHTML = '';
  data.forEach((item) => {
    liHTML += `<li><img src="${item.url}" class="layz" loading="lazy"/></li>`;
  });
  ul.innerHTML = liHTML;
}

window.addEventListener('DOMContentLoaded', function () {
  let spans = document.querySelectorAll('.yuan5');
  let images = document.querySelectorAll('.Hot-2 > ul'); // 获取所有图片
  let currentImageIndex = 0; // 当前显示的图片索引
  let indexs = -1;
  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 更新图片索引
      currentImageIndex = index;
      // 移动到下一张图片
      images.forEach((image, imgIndex) => {
        image.style.transform =
          'translateX(' + (imgIndex - currentImageIndex) * 100 + '%)';
      });
    });
  });

  spans.forEach((el, index) => {
    el.addEventListener('click', () => {
      // 移除其他元素的 'active' 类
      spans.forEach((el, i) => {
        if (i !== index) {
          el.classList.remove('active');
        }
      });
      // 给当前元素添加 'active' 类
      if (indexs !== index) {
        el.classList.add('active');
        indexs = index; // 更新索引
      }
    });
  });
});

lazyLoad();
function lazyLoad() {
  let imgs = document.querySelectorAll('.lazy');
  let ul = document.querySelector('ul');
  //使用交叉观察函数
  let io = new IntersectionObserver(
    (entries) => {
      //回调函数
      console.log(entries);
      entries.forEach((item) => {
        if (item.isIntersecting) {
          console.log(item.target);
          item.target.classList.remove('lazy');
          io.unobserve(item.target);
          item.target.src = item.target.dataset.src || item.target.src;
        }
      });
    },
    {
      //配置对象
      root: ul,
      rootMargin: '200px 0px',
    }
  );
  imgs.forEach((el) => {
    //开启监听observe
    io.observe(el);
  });
}

// export default ajaxFn;
